<script setup>
    const props = defineProps({
        collapse:{
            type: Boolean,
            required: true
        }
    })
</script>
<template>
      <el-menu
        :collapse="collapse"
        :collapse-transition="false" 
        mode="vertical"
        router
        default-active="2"
        class="el-menu-vertical-demo"
      >
        <el-menu-item index="/home" class="menu-item">
          <el-icon><HomeFilled /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>首页</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
        <el-sub-menu >
            <template #title>
                <el-icon><Management /></el-icon>
                <span>作品管理</span>
            </template>
            <el-menu-item index="/works/category">作品分类</el-menu-item>
            <el-menu-item index="/works/management">作品管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/banner" class="menu-item">
          <el-icon><PictureFilled /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>幻灯片管理</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item index="/reader" class="menu-item">
          <el-icon><UserFilled /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>读者管理</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
        <el-sub-menu index="/reports">
            <template #title>
                <el-icon><InfoFilled /></el-icon>
                <span>举报管理</span>
            </template>
            <el-menu-item index="/reports/reportBook">举报书籍</el-menu-item>
            <el-menu-item index="/reports/reportComment">举报评论</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/orders">
            <template #title>
                <el-icon><List /></el-icon>
                <span>订单管理</span>
            </template>
            <el-menu-item index="/orders/orderCoin">币券订单管理</el-menu-item>
            <el-menu-item index="/orders/orderVip">会员订单管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/product" class="menu-item">
          <el-icon><Menu /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>商品管理</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item index="/author" class="menu-item">
          <el-icon><Avatar /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>作者管理</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item index="/withdrawal" class="menu-item">
          <el-icon><WalletFilled /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>提现管理</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item index="/comment" class="menu-item">
          <el-icon><Comment /></el-icon>
          <template #title>
            <div class="menu-item-content">
              <div class="left-content">
                <span>评论管理</span>
              </div>
              <el-icon class="arrow-icon" v-if="!collapse"><ArrowRight /></el-icon>
            </div>
          </template>
        </el-menu-item>
      </el-menu>
</template>
<style scoped lang="scss">
h5{
    height: 60px;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    border: 1px solid white;
}

:deep(.el-icon) {
    svg {
        height: 2em !important;
        width: 2em !important;
    }
}

.el-menu-item [class^=el-icon] {
    margin-right: 5px;
}

.menu-item {
  .menu-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .left-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .arrow-icon {
    margin-left: auto;
  }
}
</style>